<template>
	<view class="create-example">
		
		<view class="ce-content" v-if="active_step!=3">
			<view class="state-tips">
				<view class="st-title">{{exampleInfo.id?'修改':'创建'}}重要他人</view>
				<text>{{active_step==0?'你的重要他人一定非常特别，快记录下来吧':active_step==1?`描述一下你心中的${exampleInfo.name}是什么样的~`:	`写下想成为${exampleInfo.name}，自己需要努力做的事情`}}</text>
			</view>
			<view style="margin: 0 36rpx 50rpx;">
				<uni-steps :options="create_step" active-icon="circle" :active="active_step" @change="changeSteps" />
			</view>
			<view class="name-picture" v-if="active_step==0">
				<view class="ex-attr ce-item">
					<text class="name">属性</text>
					<uni-data-checkbox v-model="exampleInfo.characterType" :localdata="exam_attr" />
				</view>
				<view class="ex-name ce-item">
					<text class="name">名字</text>
					<input type="text" :value="exampleInfo.name" maxlength="20" @input="val => nameInput(val, 'mz')" placeholder="请输入重要他人姓名" placeholder-style="color: #aaa">
				</view>
				<!-- <view class="ex-name ce-item">
					<text class="name">学校</text>
					<input type="text" :value="exampleInfo.schoolName" maxlength="20" @input="val => nameInput(val, 'xx')" placeholder="请输入学校名称" placeholder-style="color: #aaa">
				</view>
				<view class="ex-name ce-item">
					<text class="name">职业规划</text>
					<input type="text" :value="exampleInfo.plan" maxlength="20" @input="val => nameInput(val, 'zygh')" placeholder="请输入职业规划" placeholder-style="color: #aaa">
				</view> -->
				<view class="ex-image ce-item">
					<text class="name">图片</text>
					<upload-btn
						:icon-info="{width: '228rpx', icon: exampleInfo.pictureUrl?exampleInfo.pictureUrl:'/static/stu/upload.png'}"
						type="image"
						@chooseFile="uploadImg"
					></upload-btn>
				</view>
			</view>
			<view class="reason-desc" v-else-if="active_step==1">
				<view class="ex-reason">
					<text class="name">选择理由</text>
					<view class="item" v-for="(item, i) in reason_list" :key="i">
						<text class="tag">{{i+1}}</text>
						<view class="cont">
							<input type="text" :value="item" @input="eve=>{reasonInput(i, eve)}" placeholder="" maxlength="100" />
							<text>{{item?item.length:0}}/100</text>
						</view>
					</view>
				</view>
				<view class="ex-desc">
					<text class="name">基本特征</text>
					<view class="textarea-box">
						<textarea :value="exampleInfo.brief" :auto-height="true" maxlength="500" @input="descInput" placeholder="可以就喜欢的理由展开说说，或者再说点重要他人的其他优点，50字以上~" placeholder-style="color: #aaaaaa" />
					</view>
				</view>
			</view>
			<view class="ex-task" v-else-if="active_step==2">
				<view class="task-time">
					<text class="name">任务期限</text>
					<view class="select-picker">
						<!-- <view class="csu-item">
							<text>{{startDate}}</text>
							<image class="date-x-icon" src="/static/rili.png" mode="aspectFit"></image>
						</view> -->
						<uni-datetime-picker
							v-model="startDate"
							type="date"
							:wppRange="true"
							:border="false"
							:clearIcon="false"
							:disabled="prohibited"
							@maskClick="maskClick" @change="dateChange" />
						<view class="" style="margin: 0 10px;">-</view>
						<uni-datetime-picker
							v-model="range"
							type="date"
							:wppRange="true"
							:border="false"
							:start="currentDate"
							:clearIcon="false"
							:disabled="prohibited"
							@maskClick="maskClick" @change="dateChange" />
					</view>
				</view>
				<view class="list">
					<text class="name">任务详情</text>
					
					<view class="item" v-for="(task, index) in exampleTask" :key="index">
						<input
							:class="`input${index}`"
							:style="{width: handleTaskState(task.state)!=1&&handleTaskState(task.state)!=3?'100%':'82%'}" type="text"
							:disabled="!task.id||handleTaskState(task.state)==3||handleTaskState(task.state)==0 || !prohibited?false:true"
							:value="task.content"
							@input="eve=>{taskInput(task, eve, index)}"
							:placeholder="`请输入任务${index==0?'一':index==1?'二':'三'}`" />
						<text class="state" v-if="handleTaskState(task.state)==1">审核中</text>
						<text class="state" v-else-if="handleTaskState(task.state)==3&&task.id">已拒绝</text>
					</view>
				</view>
			</view>
			<view class="see-example" v-if="active_step==1||active_step==2" @click="seeExample(active_step)">{{active_step==1?'不知道怎么填？点击查看范例':'点击查看如何设计合理的目标'}}</view>
			<view class="confirm-create" @click="nextSteps()">
				{{active_step==0?'就是ta':active_step==1?'就是这样':'开始努力'}}
			</view>
		</view>
		<view v-else-if="active_step==3" class="bind-teacher-box">
			<view class="bind-title">
				创建成功
				<view v-if="bindState!=2 &&bindState!=1">请先<text>绑定导师</text></view>
			</view>
			<view class="bind-teacher xd-box-shadow">
				<text class="name">绑定导师</text>
				<view class="right">
					<view class="tea-select" :style="{color: selectTeaItem.id || (bindState==1||bindState==2)?'#555':'#aaa'}" @click="getTeachers()">
						<text>{{selectTeaItem.id?selectTeaItem.name:(bindState==1||bindState==2)?teacher_info.name:'选择导师'}}</text>
						<uni-icons v-if="this.bindState!=1 && this.bindState != 2" type="bottom"></uni-icons>
					</view>
					<text v-if="bindState==2" class="cancel">已绑定</text>
					<text v-else-if="bindState==1" class="cancel">审核中</text>
					<text v-else class="submit-bind" @click="setBindTea()">提交</text>
				</view>
			</view>
			<view class="confirm-create" style="height: 96rpx;line-height: 96rpx;" @click="exampleDetail()">
				下一步
			</view>
		</view>
		<uni-transition mode-class="fade"
			:styles="{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'rgba(0, 0, 0, .6)', 'z-index': 9}" :show="select_tea || task_expiration" @click="closePopup">
		</uni-transition>
		<uni-transition :mode-class="['slide-bottom']"
			:styles="select_class"
			:show="select_tea">
			<view class="select-tea">
				<view class="search-box">
					<input type="text" :value="search_value" @input="searchValue" placeholder="请输入导师名字" />
					<text @click="getTeachers()">搜索</text>
				</view>
				<scroll-view :scroll-top="0" style="height: 600rpx;" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<view class="list">
						<view :class="['item', {'active': selectTeaItem.id==teacher.id}]" v-for="(teacher, i) in teachers_list" :key="i" @click="selectTea(teacher)">
							{{teacher.name}}
						</view>
					</view>
					<uni-load-more :status="more"></uni-load-more>
				</scroll-view>
				
			</view>
		</uni-transition>
		<uni-transition mode-class="fade"
			:styles="fade_class"
			:show="task_expiration">
			<view class="task-exp-tips popup-top">
				<uni-icons type="clear"  @click="closePopup"></uni-icons>
				<text class="te-title">恭喜{{studentInfo.name}}同学~</text>
				<view class="te-content">
					你完成了阶段性任务，跨越了一座山峰，<br>快来设置下一阶段任务，攀登下一座高峰！
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
import uploadBtn from './components/select-upload-file.vue'
	export default {
		components: {
			uploadBtn
		},
		data(){
			return {
				studentInfo: getApp().globalData.userInfo || {},
				exampleTask: [],
				initialData: [],
				exampleInfo: {characterType: 1},
				exampleInfoCopy: {},
				upload_tasks: [],
				examId: '',
				options: {},
				currentDate: '',
				startDate: '',
				range: '',
				prohibited: false,
				task_expiration: false,
				fade_class: {
					position: 'absolute',
					'z-index': 9
				},
				create_step: [{
					title: '1'
				}, {
					title: '2'
				}, {
					title: '3'
				}],
				active_step: 0,
				exam_attr: [{
					text: '现实人物',
					value: 1
				}, {
					text: '虚拟人物',
					value: 2
				}],
				reason_list: ['', '', ''],
				// 选择导师
				select_tea: false,
				select_class: {
					position: 'absolute',
					width: '100%',
					bottom: '0',
					left: 0,
					height: '760rpx',
					'z-index': 9
				},
				selectTeaItem: {},
				bindState: -1,
				teachers_list: [],
				search_value: '',
				teaPage: 1,
				more: 'more',
			}
		},
		onLoad(options){
			let date = new Date();
				let Mon = date.getMonth()+1;
				Mon = Mon>9?Mon:`0${Mon}`;
				let day = date.getDate();
				day = day>9?day:`0${day}`
			this.currentDate = date.getFullYear()+'-'+Mon+'-'+day;


			this.examId = options.id;
			this.options = options;
			
			if(options.id){ // 选择的重要他人的id
				this.getfindExample()
			}else{
				// 创建或修改重要他人
				if(options.overdue>0&&options.needRefine!=1){
					this.active_step = 2
				}
				this.getBindExample();
			}
			
				this.getExampleTask();
		},
		methods: {
			changeSteps(i){
				if(this.options.overdue>0&&this.options.needRefine!=1){
					uni.showToast({
						duration: 2000,
						title: '重要他人信息不能更改',
						icon: 'none',
						mask: true,
						position: 'bottom'
					})
					return;
				}
				let msg = ''
				if(i==0){

				}else if(i==2){
					let list = []
					for(let i=0; i<this.reason_list.length; i++){
						let cont = this.reason_list[i] || ''
						if(cont){
							list.push(cont)
						}
					}
					if(!this.exampleInfo.name){
						msg = '重要他人名字不能为空'
					}else if(!this.exampleInfo.pictureUrl){
						msg = '重要他人图片不能为空'
					}else if(list.length!=3){
						msg = '选择理由不能为空'
					}else if(!this.exampleInfo.brief || this.exampleInfo.brief.length<50){
						msg = '重要他人描述需大于50个字'
					}
				}else if(i<=1){
					if(!this.exampleInfo.name){
						msg = '重要他人名字不能为空'
					}else if(!this.exampleInfo.pictureUrl){
						msg = '重要他人图片不能为空'
					}
				}
				if(msg!=''){
					uni.showToast({
						duration: 2000,
						title: msg,
						icon: 'none',
						mask: true,
						position: 'bottom'
					})
					return
				}
				this.active_step = i
			},
			nextSteps(){
				// 跳转到下一步之前
				let msg = '', isDiff = false;
				if(this.active_step==0){
					if(!this.exampleInfo.name){
						msg = '重要他人名字不能为空'
					}else if(!this.exampleInfo.pictureUrl){
						msg = '重要他人图片不能为空'
					}
				}else if(this.active_step==1){
					let list = []
					for(let i=0; i<this.reason_list.length; i++){
						let cont = this.reason_list[i] || ''
						if(cont){
							list.push(cont)
						}
					}
					if(list.length!=3){
						msg = '选择理由不能为空'
					}else if(!this.exampleInfo.brief || this.exampleInfo.brief.length<50){
						msg = '重要他人描述需大于50个字'
					}
				}else if(this.active_step==2){
					this.upload_tasks = [];
					for(let i=0; i<this.exampleTask.length; i++){
						let item = this.exampleTask[i], obj = {};

						if(item.content){
							obj.content = item.content;
							if(item.id){
								obj.taskId = item.id;
							}
							
							this.upload_tasks.push(obj);
							if((this.initialData[i]&&this.initialData[i]!=item.content || !this.initialData[i])&&!isDiff){
								isDiff = true;
							}
						}
					}
					msg = !this.range?'请选择结束时间':this.upload_tasks.length!=3?'任务内容不能为空':''
				}
				
				
				if(msg!=''){
					uni.showToast({
						duration: 2000,
						title: msg,
						icon: 'none',
						mask: true,
						position: 'bottom'
					})
					return
				}
				// 跳转到下一步之后
				if(this.active_step==2){
					let msgText = isDiff?'确认提交吗':'没有修改内容，确定要提交吗'
					this.utils.showModal('', msgText, this.confirmCreate)
					return
				}

				this.active_step++;
				
				
			},
			reasonInput(i, eve){
				this.$set(this.reason_list, i, eve.detail.value);
			},
			maskClick(e) {
				// console.log('----maskClick事件:', e);
			},
			dateChange(e) {
				// console.log('----confirm事件:', e, this.range);
			},
			nameInput(eve, type){
				if(type == 'mz'){
					this.$set(this.exampleInfo, 'name', eve.detail.value);
				}else if(type == 'xx'){
					this.$set(this.exampleInfo, 'schoolName', eve.detail.value);
				}else if(type == 'zygh'){
					this.$set(this.exampleInfo, 'plan', eve.detail.value);
				}
			},
			labelInput(eve){
				this.$set(this.exampleInfo, 'label', eve.detail.value);
			},
			keywordInput(eve){
				this.$set(this.exampleInfo, 'keyWord', eve.detail.value);
			},
			descInput(eve){
				this.$set(this.exampleInfo, 'brief', eve.detail.value);
			},
			taskInput(task, eve, index){
				this.$set(task, 'content', eve.detail.value);
				if(this.handleTaskState(task.state) == 3){
					task.state = 0;
				}
				
			},
			handleTaskState(state){
				return state==0?0:state==1 || state==2 ? 1 : state==3 || state==5? 3 : 2;
			},
			getBindExample(){
				this.api.get('sExample/findBindExample').then(res=>{
					if(res.data.state == 'ok'){
						let info = res.data.example || {};
						this.exampleInfoCopy = Object.assign({}, info);
						if(!info.id) return
						info.characterType = info.characterType || 1;
						this.reason_list = info.reason&&JSON.parse(info.reason).length>0?JSON.parse(info.reason):this.reason_list;
						info.pictureUrl = this.api.xiaodeObsUrl+info.pictureUrl;
						this.exampleInfo = info
					}
				})
			},
			getfindExample(){
				this.api.get('sExample/findExample', {
					exId: this.options.id
				}).then(res=>{
					let info = res.data.example || {};
					info.pictureUrl = this.api.xiaodeObsUrl+info.pictureUrl;
					this.exampleInfo.characterType = info.characterType || 1;
					this.$set(this.exampleInfo, 'name', info.name)
					
					if(!this.exampleInfo.studentId){
						// 如果是默认的榜样，获取榜样任务
						this.$set(this.exampleInfo, 'brief', info.brief)
						// this.getDefaultTask()
					}
					
				})
			},
			getDefaultTask(){
				this.api.get('sExample/findDefaultTaskByExampleId', {
					exId: this.options.id
				}).then(res=>{
					if(res.data.state != 'ok') return;
					const list = res.data.taskList || [];
					if(list.length==0){
						for(let i=0; i<3; i++){
							this.initialData.push('')
							if(list[i]){
								list[i].id = ''
								this.exampleTask.push(list[i])
							}else{
								this.exampleTask.push({})
							}
							
						}
					}else{
						for(let i=0; i<list.length; i++){
							if(list[i]){
								list[i].id = ''
								this.exampleTask.push(list[i])
								this.initialData.push(list[i].content)
							}else{
								this.exampleTask.push({})
								this.initialData.push('')
							}
						}
					}
				})
			},
			getExampleTask(){
				this.api.get('sExample/getExampleTask').then(res=>{
					let tasks = res.data.setList.reverse();
					if(tasks.length==0&&this.options.id){
						this.getDefaultTask()
						return
					}
					this.exampleTask = [];
					for(let i=0; i<3; i++){
						if(tasks[i]){
							this.exampleTask.push(tasks[i])
							this.initialData.push(tasks[i].content)
						}else{
							this.exampleTask.push({})
							this.initialData.push('')
						}
						
					}

					// 任务是否过期判断
					let end_time = tasks[0] ? tasks[0].deadline : '';
					let overdue = true;
					if(end_time){
						overdue = new Date()>new Date(end_time.split('-').join('/'));
						this.range = !overdue?end_time.split(' ')[0]:'';
						this.startDate = tasks[0].updateTime.split(' ')[0]
					}
					this.prohibited = !overdue;
					if(this.options.overdue==1){
						this.prohibited = false;
						this.task_expiration = true;
					}else if(this.options.overdue==2){
						this.prohibited = false;
					}
				})
			},
			seeExample(type){
				uni.navigateTo({
					url: '/pages/student/example-template?type='+type
				})
			},
			confirmCreate(){
				if(this.options.overdue>0&&this.options.needRefine!=1){
					// 只能修改任务
					this.addExampleTask();
					return;
				}
	
				let pictureUrl = this.exampleInfo.pictureUrl;
				if(pictureUrl.indexOf(this.api.xiaodeObsUrl)!=-1){
					pictureUrl = pictureUrl.split(this.api.xiaodeObsUrl)[1]
				}
				let paramsInfo = this.exampleInfo
				let data = {}
				let path = 'sExample/addExample'
				if(this.exampleInfo.id){
					path = 'sExample/updateExample'
					data.exId = paramsInfo.id;
					if(paramsInfo.name != this.exampleInfoCopy.name){
						data.name = paramsInfo.name
					}
					if(paramsInfo.brief != this.exampleInfoCopy.brief){
						data.brief = paramsInfo.brief
					}
					if(paramsInfo.characterType != this.exampleInfoCopy.characterType){
						data.characterType = paramsInfo.characterType
					}
					if(JSON.stringify(this.reason_list) != this.exampleInfoCopy.reason){
						data.reason = JSON.stringify(this.reason_list)
					}
				}else{
					data = {
						exId: '',
						name: paramsInfo.name,
						reason: JSON.stringify(this.reason_list),
						characterType: paramsInfo.characterType,
						brief: paramsInfo.brief,
					}
				}
				data.pic = pictureUrl
				this.api.post(path, data).then(res=>{
					if(res.data.state == 'ok'){
						this.addExampleTask()
					}
				})
				
			},
			deleteTask(item, index){
				this.api.post('sExample/delExampleTask', {
					taskId: item.taskId
				}).then(res=>{
					if(res.data.state == 'ok'){
						this.$set(item, 'taskId', '');
						this.$set(item, 'content', '');
						uni.showToast({
							title: '删除成功',
							icon: 'none',
							duration: 2000,
							mask: true,
							position: 'bottom'
						})
					}
				})
			},
			editTask(item, index){
				this.$set(item, 'content', '')
				item.edit = true;
				// this.$set(item, 'edit', 1);
				
				// document.querySelector(`.input${index}`).focus()
			},
			addExampleTask(type){
				this.api.get('sExample/addExampleTask', {
					tasks: JSON.stringify(this.upload_tasks),
					startDate: this.startDate,
					date: this.range
				}).then(res=>{
					if(res.data.state=='ok'){
						uni.showToast({
							title: type=='xz'?'已绑定':this.exampleInfo.id?'修改成功':'添加成功',
							icon: 'none',
							duration: 2000,
							mask: true,
							position: 'bottom'
						})
						// 创建完成去绑定导师
						this.active_step = 3
						this.bindTeacher();
						
					}
					
				})
			},
			uploadImg(type, list, sendList){
				let path = this.api.xiaodeObsUrl + sendList[0].path
				
				this.$set(this.exampleInfo, 'pictureUrl', path)
			},
			// *****导师绑定******
			bindTeacher(){
				this.api.get('sBindTeacher/findBindTeacher').then(res=>{
					this.teacher_info = res.data.teacher || {};
					this.bindState = res.data.bindState;
				})
			},
			searchValue(eve){
				this.search_value = eve.detail.value;
			},
			getTeachers(){
				
				this.teaPage = 1;
				this.teachers_list = [];
				this.findTeachers();
			},
			findTeachers(){
				if(this.bindState==1 || this.bindState == 2) return;
				this.more = 'loading';
				this.api.get('sBindTeacher/findTeachers', {
					curPage: this.teaPage,
					pageSize: 10,
					keyWord: this.search_value||''
				}).then(res=>{
					let list = res.data.teachers.list;
					this.teachers_list = this.teachers_list.concat(list);
					this.select_tea = true;
					if(list.length<10){
						this.more = 'no-more';
					}
				})
			},
			lower(){
				if(this.more == 'no-more') return;
				this.teaPage ++;
				this.findTeachers()
			},
			selectTea(item){ // 选择导师
				this.selectTeaItem = item;
				this.closePopup();
			},
			setBindTea(){
				this.api.post('sBindTeacher/stuBindTea', {
					teacherId: this.selectTeaItem.id
				}).then(res=>{
					if(res.data.state == 'ok'){
						uni.showToast({
							title: '已提交审核',
							duration: 2000,
							icon: 'none',
							mask: true,
							position: 'bottom'
						})
						this.selectTeaItem = {};
						setTimeout(()=>{
							this.bindTeacher();
						}, 1000)
					}
					
				})
			},
			cancelBindTea(){
				let that = this;
				let msgText = `确认取消绑定${that.teacher_info.name}老师吗`
				this.utils.showModal('', msgText, this.confirmCancel)
			},
			confirmCancel(){
				this.api.post('sBindTeacher/stuCancelBindTea', {
					teacherId: this.teacher_info.id
				}).then(res=>{
					if(res.data.state == 'ok'){
						this.bindTeacher()
					}
				})
			},
			exampleDetail(){
				if(this.bindState!=1 && this.bindState != 2) {
					uni.showToast({
						title: `请先${this.selectTeaItem.name?'提交':'绑定'}导师`,
						duration: 2000,
						icon: 'none',
						mask: true,
						position: 'bottom'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/student/example-details?showHome=1'
				})
			},
			// *****导师绑定******
			closePopup(){
				this.search_value = '';
				this.select_tea = this.task_expiration = false;
			}
		}
	}
</script>

<style lang="less">
	.create-example{
		.task-exp-tips{
			font-size: 26rpx;
			width: 608rpx;
			
			padding: 80rpx 0 70rpx 64rpx;
			box-sizing: border-box;
			.uni-icons{
				position: absolute;
				top: 24rpx;
				right: 32rpx;
			}
		}
		.ce-content{
			padding: 60rpx 64rpx 0;
			.see-example{
				margin: 40rpx 0 -10rpx;
				text-align: center;
				text-decoration: underline;
				font-size: 24rpx;
				color: #55acee;
			}
		}
		.state-tips{
			display: block;
			text-align: center;
			margin-bottom: 56rpx;
			font-size: 24rpx;
			text{
				display: block;
				margin-top: 32rpx;
				color: #aaa;
			}
			.st-title{
				font-size: 36rpx;
			}
		}
		.name-picture{
			margin: 0 64rpx;
			.ce-item{
				display: flex;
				// align-items: stretch;
				padding: 32rpx 0 16rpx;
				border-bottom: 2rpx solid #f2f2f2;
				&.ex-image{
					border: none;
				}
			}
			
			.name{
				width: 120rpx;
				white-space: nowrap;
				
			}
			.imgs{
				font-size: 0;
				image{
					width: 228rpx;
					height: 228rpx;
				}
			}
		}
		.reason-desc{
			margin: 0 36rpx;
			.name{
				display: block;
				font-size: 28rpx;
				color: #000;
				margin-bottom: 32rpx;
			}
			.item{
				
				margin-top: 20rpx;
				display: flex;
				align-items: center;
			}
			.tag{
				margin-left: 16rpx;
				display: inline-block;
				width: 46rpx;
				height: 38rpx;
				line-height: 38rpx;
				text-align: center;
				background: #55acee;
				border-radius: 10rpx;
				color: #fff;
				font-size: 22rpx;
			}
			.cont{
				display: flex;
				align-items: center;
				width: 536rpx;
				height: 56rpx;
				margin-left: 24rpx;
				border: 2rpx solid #f2f2f2;
				border-radius: 10rpx;
				font-size: 24rpx;
				input{
					width: 86%;
				}
				text{
					margin-left: 16rpx;
					white-space: nowrap;
				}
			}
			.ex-desc{
				margin-top: 60rpx;
			}
			textarea{
				width: 100%;
				min-height: 100rpx;
				padding: 24rpx;
				border-radius: 10rpx;
				border: 2rpx solid #f2f2f2;
				box-sizing: border-box;
				font-size: 24rpx;
			}
		}
		.ex-task{
			margin: 0 8rpx;
			.task-time{
				display: flex;
				align-items: center;
			}
			.name{
				font-size: 28rpx;
				color: #000;
				white-space: nowrap;
			}
			.select-picker{
				margin-left: 24rpx;
				width: calc(100vh - 136rpx);
				display: flex;
				align-items: center;
				.csu-item{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 40px;
					border-bottom: 1px solid #f2f2f2;
					font-size: 14px;
				}
				.date-x-icon{
					min-width: 25px;
					width: 25px;
					height: 25px;
				}
				.uni-date__x-input{
					padding: 0;
				}
			}
			.list{
				margin-top: 60rpx;
				width: 100%;
				.name{
					display: block;
					margin-bottom: 24rpx;
				}
				.item{
					border-bottom: 2rpx solid #f2f2f2;
					height: 70rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-left: 8rpx;
					&.task-item-err{
						// padding: 16rpx 0 0;
						border-bottom: 2rpx solid red;
					}

					.task-err{
						font-size: 24rpx;
						color: red;
					}
					input{
						min-width: 82%;
						font-size: 28rpx;
						&.input-placeholder{
							color: #999;
						}
					}
					.state{
						white-space: nowrap;
						color: #55acee;
						font-size: 24rpx;
					}
					.del{
						color: #999;
						white-space: nowrap;
					}
					.edit-icon{
						width: 56rpx;
						height: 56rpx;
					}
				}
			}
			
		}
		.bind-teacher-box{
			padding: 0 32rpx 0;
			// #ifndef H5
			height: 100vh;
			// #endif
			// #ifdef H5
			height: calc(100vh - 44px);
			// #endif
			display: flex;
			justify-content: center;
			flex-direction: column;
			.bind-title{
				font-size: 36rpx;
				text-align: center;
				text{
					color: #55acee;
				}
			}
		}
		.bind-teacher{
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			padding: 40rpx 32rpx;
			.right{
				display: flex;
				align-items: center;
			}
			.tea-select{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 330rpx;
				height: 56rpx;
				line-height: 56rpx;
				margin: 0 40rpx 0 24rpx;
				padding-right: 40rpx;
				padding-left: 10rpx;
				border-right: 2rpx solid #f2f2f2;
				border-radius: 10rpx;
				box-sizing: border-box;
			}
			.cancel{
				margin-left: 24rpx;
				color: #55acee;
			}
			.submit-bind{
				margin-left: 16rpx;
				background:  #f2f2f2;
				color: #7f7f7f;
				border-radius: 8rpx;
				padding: 8rpx 24rpx;
				font-size: 24rpx;
				
			}
		}
		.confirm-create{
			margin-top: 64rpx;
			background-color: #55acee;
			border-radius: 8rpx;
			height: 70rpx;
			width: 100%;
			line-height: 70rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
		}
		.tips{
			margin-top: 40rpx;
			text-align: center;
			color: #7d8d93;
			text-decoration: underline;
		}
		.task-exp{
			font-size: 26rpx;
			width: 608rpx;
			
			padding: 80rpx 0 70rpx 64rpx;
			box-sizing: border-box;
			.close{
				position: absolute;
				top: 24rpx;
				right: 32rpx;
			}
		}
	}
</style>
